<template>
    <div>
        <div class="nav">
            <i class="el-icon-back">Back</i>
            <div>
                <i class="el-icon-chat-square"></i>
                <i class="el-icon-search"></i>
                <i class="el-icon-suitcase"></i>
            </div>
        </div>
        <div class="first">
            <div class="head"></div>
            <div class="title">
                <p class="title2">McDonald's</p>
                <i class="el-icon-location-outline">Bramiea & Sandalwood</i>
                </div>
            <div class="collect">
                <i class="el-icon-star-on"></i>
            </div>
        </div>
        <div class="bar">
            <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="Breakfast Menu" name="first"></el-tab-pane>
            <el-tab-pane label="Lunch & Dinner" name="second">
                <el-tabs class="back" v-model="activeName1" type="border-card" @tab-click="handleClick1">
                    <el-tab-pane label="Today's Deals" name="first1">用户管理</el-tab-pane>
                    <el-tab-pane label="Burger Meals" name="second1">
                        <div class="shop">
                            <el-image
                             style="width: 100px; height: 100px"
                             :src="url"
                             :fit="fit"></el-image>
                             <div class="text">
                                <p>Classic Cheese Burger(400 Cals)</p>
                             <div class="text1"><p style="text-decoration:line-through">$5.89</p>
                             <p class="price">$4.59</p></div></div>
                             <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="shop">
                            <el-image
                             style="width: 100px; height: 100px"
                             :src="url"
                             :fit="fit"></el-image>
                             <div class="text">
                                <p>Classic Cheese Burger(400 Cals)</p>
                             <div class="text1"><p style="text-decoration:line-through">$5.89</p>
                             <p class="price">$4.59</p></div></div>
                             <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="shop">
                            <el-image
                             style="width: 100px; height: 100px"
                             :src="url"
                             :fit="fit"></el-image>
                             <div class="text">
                                <p>Classic Cheese Burger(400 Cals)</p>
                             <div class="text1"><p style="text-decoration:line-through">$5.89</p>
                             <p class="price">$4.59</p></div></div>
                             <i class="el-icon-arrow-right"></i>
                        </div><div class="shop">
                            <el-image
                             style="width: 100px; height: 100px"
                             :src="url"
                             :fit="fit"></el-image>
                             <div class="text">
                                <p>Classic Cheese Burger(400 Cals)</p>
                             <div class="text1"><p style="text-decoration:line-through">$5.89</p>
                             <p class="price">$4.59</p></div></div>
                             <i class="el-icon-arrow-right"></i>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="Chicken & Fish" name="third1">角色管理</el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="Overnight" name="third">Overnight</el-tab-pane>
  </el-tabs>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second',
        activeName1: 'second1',
        
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleClick1(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>
<style scoped>
    .nav{
        width: 90%;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
    }
    .nav i{
        font-size: 20px;
        margin: 0px 10px;
    }
    .first{
        width: 90%;
        margin: 20px auto;
        display: flex;
        justify-content: space-around;
    }
    .first .head{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color:#d42f3a;
    }
    .first .collect{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color:#ecedf1;
    }
    .first .collect .el-icon-star-on{
        font-size: 30px;
    }
    .bar{
        width: 90%;
        margin: 20px auto;
    }
    .shop{
        display: flex;
    }
    .text{
        margin: 0 5px;
    }
    .text1{
        display: flex;
    }
    .shop i{
        font-size: 30px;
        margin: auto 0;
    }
    .back{
        background-color: #ecedef ;
    }
    .title2{
        font-size:20px;
    }
    el-image{
        width: 80px;
        height: 80px;
    }
    .price{
        color: #6ec7e9;
    }
</style>